<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title>Bootstrap3响应式按钮 - PomeloCloud</title>
  <link rel="icon" href="https://file.uzykj.com/favicon.ico">
  <link href="https://cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="./public/css/responsive.css" rel="stylesheet">
</head>
<body>
<header class="navbar">
  <div class="container">
        <span>
            <a href="https://pomelo.work">PomeloCloud</a>
        </span>
    <ul>
      <li><a href="https://pomelo.work/BootstrapExtend/index.html" target="_blank">主题特效</a></li>
      <li><a href="https://pomelo.work/BootstrapExtend/css-checkbox-radios.html">纯原CSS</a></li>
      <li><a href="https://pomelo.work/BootstrapExtend/power-button-group.html">开关组</a></li>
      <li><a href="https://pomelo.work/NiceButton/index.html">响应式</a></li>
      <li><a href="https://pomelo.work/NiceButton/crystal-glass.html">水晶玻璃</a></li>
      <li><a href="https://pomelo.work/NiceButton/newbutton.html">新型按钮</a></li>
    </ul>
  </div>
</header>
<div class="brb_wrapper">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 text-center"><h1>Bootstrap3响应式按钮</h1>
        <h3>高光效果</h3></div>
    </div>
  </div>
  <div class="container">
    <header>
      <h2>核心按钮组</h2>
    </header>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkpink"><i class="fa fa-bar-chart"></i><span>Bar</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare brown "><i class="fa fa-check"></i><span>Check</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare gray "><i class="fa fa-cloud"></i><span>Cloud</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkbluelightplus "><i class="fa fa-database"></i><span>DB</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkgreen "><i class="fa fa-cog fa-spin"></i><span>Cog</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkpink "><i class="fa fa-code-fork"></i><span>Code</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightred "><i class="fa fa-calendar"></i><span>Date</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightpurple "><i class="fa fa-envelope"></i><span>Mail</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare blue "><i class="fa fa-desktop"></i><span>Desktop</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare bluelight "><i class="fa fa-eye"></i><span>Eye</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare green "><i class="fa fa-info"></i><span>Info</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightred "><i class="fa fa-heart"></i><span>Heart</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightgreen "><i class="fa fa-gears"></i><span>Gears</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare azure "><i class="fa fa-inbox"></i><span>inbox</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare purpleplus "><i class="fa fa-history"></i><span>History</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare orangelight "><i class="fa fa-laptop"></i><span>Laptop</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare muddygreen "><i class="fa fa-music"></i><span>Music</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightgreen "><i class="fa fa-bed"></i><span>Bed</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare muddygreenplus "><i class="fa fa-home"></i><span>Home</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkbrown "><i class="fa fa-lock"></i><span>Lock</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare brownlight "><i class="fa fa-phone"></i><span>Phone</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkbluelight "><i class="fa fa-pencil"></i><span>Pencil</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare beigeplus "><i class="fa fa-navicon"></i><span>Navicon</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare muddygreenplus "><i class="fa fa-reply"></i><span>Reply</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lime "><i class="fa fa-tag"></i><span>Tag</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightpink "><i class="fa fa-shopping-cart"></i><span>Cart</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare beige "><i class="fa fa-tint"></i><span>Tint</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare anotherpurple "><i class="fa fa-tablet"></i><span>Tablet</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare orangeblind "><i class="fa fa-trash-o"></i><span>Trash</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lime "><i class="fa fa-tree"></i><span>Tree</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare orangeplus "><i class="fa fa-credit-card"></i><span>Card</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkorange "><i class="fa fa-server"></i><span>Server</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkgreenplus "><i class="fa fa-heartbeat"></i><span>Heart</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare black "><i class="fa fa-at"></i><span>At</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare bluelightplus "><i class="fa fa-bolt"></i><span>Bolt</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare orangeplus "><i class="fa fa-bell-slash-o"></i><span>Bell</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare "><i class="fa fa-close"></i><span>Close</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare muddygreen "><i class="fa fa-eraser"></i><span>Eraser</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightgreentwoplus "><i class="fa fa-file-excel-o"></i><span>Excel</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare blue "><i class="fa fa-paypal"></i><span>Paypal</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare greenplus "><i class="fa fa-fire"></i><span>Fire</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare gray "><i class="fa fa-flask"></i><span>Flask</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightgreenplus "><i class="fa fa-folder"></i><span>Folder</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare green "><i class="fa fa-magic"></i><span>Magic</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare anothergreen "><i class="fa fa-key"></i><span>Key</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare azure "><i class="fa fa-line-chart"></i><span>Chart</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare blueplus "><i class="fa fa-paint-brush"></i><span>Print</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightgreenplus "><i class="fa fa-rss"></i><span>Rss</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightpurpleplus "><i class="fa fa-plane"></i><span>Plane</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare purple "><i class="fa fa-reply-all"></i><span>Reply</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkblue "><i class="fa fa-refresh fa-spin"></i><span>Refresh</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare yellow "><i class="fa fa-signal"></i><span>Signal</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare orangelightplus "><i class="fa fa-user-plus"></i><span>User</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare lightpurpleplus "><i class="fa fa-book"></i><span>Book</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare red "><i class="fa fa-filter"></i><span>Filter</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare orange "><i class="fa fa-level-up"></i><span>Level</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare muddyred "><i class="fa fa-minus"></i><span>Minus</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare muddypurple "><i class="fa fa-sort-numeric-desc"></i><span>Sort</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare darkpurple "><i class="fa fa-plus"></i><span>Plus</span></div>
      </div>
      <div class="col-lg-2 col-md-2">
        <div class="buttonSquare red "><i class="fa fa-paper-plane"></i><span>Plane</span></div>
      </div>
    </div>
  </div>
  <div class="container">
    <header>
      <h2>变化按钮组</h2>
    </header>
    <div class="row">
      <div class="col-lg-3 col-md-3">
        <div class="buttonSquare darkblue "><i class="fa fa-magic"></i><span>Magic</span></div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="buttonSquare orange "><i class="fa fa-key"></i><span>Key</span></div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="buttonSquare purple "><i class="fa fa-line-chart"></i><span>Chart</span></div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="buttonSquare green "><i class="fa fa-paint-brush"></i><span>Print</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-4">
        <div class="buttonSquare green "><i class="fa fa-signal"></i><span>Signal</span></div>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="buttonSquare orangelightplus "><i class="fa fa-user-plus"></i><span>User</span></div>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="buttonSquare red "><i class="fa fa-book"></i><span>Book</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3 col-md-3">
        <div class="buttonRounded anothergreen"><i class="fa fa-key"></i><span>Key</span></div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="buttonRounded azure"><i class="fa fa-line-chart"></i><span>Chart</span></div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="buttonRounded blueplus"><i class="fa fa-paint-brush"></i><span>Print</span></div>
      </div>
      <div class="col-lg-3 col-md-3">
        <div class="buttonRounded lightgreenplus"><i class="fa fa-rss"></i><span>Rss</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-md-6">
        <div class="buttonRounded purple"><i class="fa fa-reply-all"></i><span>Reply</span></div>
      </div>
      <div class="col-lg-6 col-md-6">
        <div class="buttonRounded lightpink"><i class="fa fa-heartbeat"></i><span>rounded buttonSquare</span></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-4">
        <div class="buttonSquare bluelightplus "><i class="fa fa-key"></i><span>Key</span></div>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="buttonSquare azure "><i class="fa fa-line-chart"></i><span>Chart</span></div>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="buttonSquare blue "><i class="fa fa-paint-brush"></i><span>Print</span></div>
      </div>
    </div>
  </div>
  <div class="container">
    <header>
      <h2>表单使用</h2>
    </header>
    <div class="row brb_form_bottom">
      <form id="brb_form">
        <div class="col-lg-4 col-md-4"><input type="text" placeholder="Name"></div>
        <div class="col-lg-4 col-md-4"><input type="text" placeholder="Email"></div>
        <div class="col-lg-4 col-md-4"><input type="text" placeholder="Subject"></div>
        <div class="col-lg-12 col-md-12"><textarea placeholder="Message"></textarea></div>
        <div class="col-lg-12 col-md-12">
          <div class="buttonRounded purple"><i class="fa fa-reply-all"></i><span>Reply</span></div>
        </div>
      </form>
    </div>
    <div class="row">
      <div class="col-lg-6 col-md-6 brb_form_bottom">
        <form id="brb_form">
          <div class="col-lg-4 col-md-4"><input type="text" placeholder="Name"></div>
          <div class="col-lg-4 col-md-4"><input type="text" placeholder="Email"></div>
          <div class="col-lg-4 col-md-4"><input type="text" placeholder="Subject"></div>
          <div class="col-lg-12 col-md-12"><textarea placeholder="Message"></textarea></div>
          <div class="col-lg-12 col-md-12">
            <div class="buttonRounded azure"><i class="fa fa-reply-all"></i><span>Reply</span></div>
          </div>
        </form>
      </div>
      <div class="col-lg-6 col-md-6 brb_form_bottom">
        <form id="brb_form">
          <div class="col-lg-4 col-md-4"><input type="text" placeholder="Name"></div>
          <div class="col-lg-4 col-md-4"><input type="text" placeholder="Email"></div>
          <div class="col-lg-4 col-md-4"><input type="text" placeholder="Subject"></div>
          <div class="col-lg-12 col-md-12"><textarea placeholder="Message"></textarea></div>
          <div class="col-lg-12 col-md-12">
            <div class="buttonRounded lightpink"><i class="fa fa-reply-all"></i><span>Reply</span></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>
